<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '客服',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="chat-container">
    <!-- 顶部导航栏 -->
    <view class="chat-header">
      <view class="back-button" @click="handleBack">
        <wd-icon name="arrow-left" size="22px"></wd-icon>
      </view>
      <view class="header-title">20250801001</view>
      <view class="header-right">
        <image src="/static/images/home/service/user.png" class="service-icon"></image>
      </view>
    </view>

    <!-- 聊天消息区域 -->
    <view class="chat-messages">
      <!-- 欢迎信息 -->
      <view class="welcome-message">
        <text class="welcome-text">欢迎您的咨询，期待为您服务</text>
      </view>
      
      <!-- 时间戳 -->
      <view class="timestamp">
        <text>16:00</text>
      </view>

      <!-- 客服消息 -->
      <view class="message-row">
        <view class="message-avatar">
          <image src="/static/images/home/service.png" class="avatar-img"></image>
        </view>
        <view class="message-bubble customer">
          <text class="message-text">您好，欢迎您的咨询，请问有什么需要帮助的吗？</text>
        </view>
      </view>

      <!-- 用户消息列表区域 -->
      <scroll-view scroll-y class="messages-scroll" ref="scrollView">
        <!-- 动态渲染消息 -->
        <view v-for="(msg, index) in messages" :key="index" class="message-row">
          <!-- 客服消息 -->
          <template v-if="msg.type === 'customer'">
            <view class="message-avatar">
              <image src="/static/images/home/service.png" class="avatar-img"></image>
            </view>
            <view class="message-bubble customer">
              <text class="message-text">{{ msg.content }}</text>
            </view>
          </template>
          
          <!-- 用户消息 -->
          <template v-else>
            <view class="message-bubble user">
              <text class="message-text">{{ msg.content }}</text>
            </view>
            <view class="message-avatar">
              <image src="/static/images/home/avatar.png" class="avatar-img"></image>
            </view>
          </template>
        </view>
      </scroll-view>
    </view>

    <!-- 底部输入区域 -->
    <view class="chat-input-container">
      <input class="chat-input" v-model="inputText" placeholder="请输入..." @confirm="sendMessage"></input>
      <view class="send-button" @click="sendMessage" :class="{ disabled: !inputText.trim() }">
        <text>发送</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';

// 输入框文本
const inputText = ref('');
// 滚动视图引用
const scrollView = ref<HTMLElement>();

// 消息列表
const messages = ref<Array<{ type: 'user' | 'customer'; content: string }>>([]);

// 发送消息
const sendMessage = () => {
  const text = inputText.value.trim();
  if (!text) return;

  // 添加用户消息
  messages.value.push({ type: 'user', content: text });
  
  // 清空输入框
  inputText.value = '';

  // 滚动到底部
  nextTick(() => {
    if (scrollView.value) {
      scrollView.value.scrollTop = scrollView.value.scrollHeight;
    }
  });

  // 模拟客服回复（2秒后）
  setTimeout(() => {
    messages.value.push({
      type: 'customer',
      content: '感谢您的咨询，我们会尽快为您处理。请问还有其他问题吗？'
    });
    
    // 滚动到底部
    nextTick(() => {
      if (scrollView.value) {
        scrollView.value.scrollTop = scrollView.value.scrollHeight;
      }
    });
  }, 2000);
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #0094FF;
  border-bottom: 1rpx solid #e5e5e5;
  color:#ffffff
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
}

.header-right {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.service-icon {
  width: 48rpx;
  height: 48rpx;
}

/* 聊天消息区域 */
.chat-messages {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.welcome-message {
  margin-bottom: 20rpx;
  text-align: center;
}

.welcome-text {
  font-size: 28rpx;
  color: #999999;
}

.timestamp {
  text-align: center;
  margin: 20rpx 0;
}

.timestamp text {
  font-size: 24rpx;
  color: #999999;
  background-color: #e5e5e5;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
}

.message-row {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.message-bubble {
  max-width: 500rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  position: relative;
}

.customer {
  background-color: #ffffff;
  border: 1rpx solid #e5e5e5;
}

.user {
  background-color: #07c160;
  color: #ffffff;
  margin-left: auto;
}

.message-text {
  font-size: 32rpx;
  line-height: 48rpx;
  word-wrap: break-word;
}

.messages-scroll {
  flex: 1;
  overflow-y: auto;
}

/* 底部输入区域 */
.chat-input-container {
  display: flex;
  align-items: center;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #e5e5e5;
}

.chat-input {
  flex: 1;
  height: 76rpx;
  padding: 0 24rpx;
  background-color: #f5f5f5;
  border-radius: 38rpx;
  font-size: 32rpx;
}

.send-button {
  width: 110rpx;
  height: 76rpx;
  margin-left: 20rpx;
  background-color: #07c160;
  border-radius: 38rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 32rpx;
}

.send-button.disabled {
  background-color: #cccccc;
}
</style>